<template>
  <view class="pay-content">
    <!-- 板块一 -->
    <view class="patient-msg-show">
      <view class="information-title">
        <img src="@/static/img/pay/line.png" alt="" />
        <text>预约信息</text>
      </view>
      <view class="patient-msg-row">
        <text>接诊医生</text>
        <text>{{ info.expertName }}</text>
      </view>
      <view class="patient-msg-row">
        <text>就诊人</text>
        <text>{{info.visitName}}</text>
      </view>
      <view class="patient-msg-row">
        <text>性别</text>
        <text>{{ info.sex == 1 ? "男" : "女" }}</text>
      </view>
      <view class="patient-msg-row">
        <text>年龄</text>
        <text></text>
      </view>
      <view class="patient-msg-row">
        <text>就诊时段</text>
        <text>{{ info.visitTime }}</text>
      </view>
      <!-- <view
        class="patient-msg-row"
        v-for="(item, index) in patient"
        :key="index"
      >
        <text>{{ item.title }}</text>
        <text>{{ item.main }}</text>
      </view> -->
      <view class="patient-msg-row">
        <!-- 左边 -->
        <view class="left-column">
          <view>电子健康卡</view>
          <view>点击右侧二维码放大</view>
        </view>
        <!-- 右边二维码 -->
        <image src="../../../icon.png" mode="" class="img"></image>
      </view>
    </view>
    <!-- 板块二 -->
    <!-- <view class="patient-msg-show" v-if="isPay">
			<view class="information-title">
				<img src="@/static/img/pay/line.png" alt="">
				<text>缴费信息</text>
			</view>
			<view class="patient-msg-row" v-for="(item,index) in patient2" :key="index">
				<text>{{item.title}}</text>
				<text class="money">￥<text class="bigger">8.00</text></text>
			</view>
		</view> -->
    <!-- 板块三 -->
    <!-- <view class="patient-msg-show" v-if="isCancel">
			<view class="information-title">
				<img src="@/static/img/pay/line.png" alt="">
				<text>取消信息</text>
			</view>
			<view class="patient-msg-row" v-for="(item,index) in patient2" :key="index">
				<text>{{item.title}}</text>
				<text>缴费信息</text>
			</view>
		</view> -->
    <!-- 板块四 -->
    <!-- <view class="patient-msg-show" v-if="isCancel">
			<view class="information-title">
				<img src="@/static/img/pay/line.png" alt="">
				<text>缴费信息</text>
			</view>
			<view class="patient-msg-row" v-for="(item,index) in patient2" :key="index">
				<text>{{item.title}}</text>
				<text>缴费信息</text>
			</view>
		</view> -->
    <!-- 支付信息 -->
    <pay :payment="100" v-if="!isPay"></pay>
    <u-button
      v-if="isPay"
      :custom-style="customStyle"
      shape="circle"
      @click="cancelOrder"
      >取消预约</u-button
    >
    <!-- 模态框 -->
    <u-modal
      v-model="isshow"
      title=" "
      :title-style="{ fontWeight: 700 }"
      width="80%"
      :show-confirm-button="false"
      confirm-text="去认证"
      :content-style="contentStyle"
    >
      <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
        <view class="modal-button">
          <view :style="cancelStyle" @click="closeModal">取消</view>
          <view :style="confirmStyle" @click="toCertification">确认取消</view>
        </view>
      </view>
    </u-modal>
    <u-toast ref="uToast" class="toast" />
  </view>
</template>

<script>
import timeMenu from "./timeMenuComponent.vue";
import pay from "@/components/pay/pay.vue";
export default {
  components: {
    timeMenu,
    pay,
  },
  onLoad(option) {
    this.info = JSON.parse(option.data);
    // console.log(this.info);
    // 发请求获取。。。
  },
  data() {
    return {
      info: {},
      isshow: true,
      isPay: true, //是否支付显示
      //就诊人信息
      patient: [
        // 	{
        // 	title: '预约状态',
        // 	main: '已预约',
        // }, {
        // 	title: '挂号序号',
        // 	main: '12',
        // },
        {
          title: "接诊医生",
          main: "胡晓静",
          id: "doctor",
        },
        {
          title: "就诊人",
          main: "李元芳",
          id: "patient",
        },
        {
          title: "性别",
          main: "女",
          id: "sex",
        },
        {
          title: "年龄",
          main: "23",
          id: "age",
        },
        {
          title: "就诊时段",
          main: "2022年09月22日 09:00~12:00",
          id: "site",
        },
        {
          title: "就诊时卡号",
          main: "4453656563422",
          id: "site",
        },
        // {
        // 	title: '就诊医生',
        // 	main: '胡晓静',
        // 	id: 'doctor'
        // },
        {
          title: "院区场地",
          main: "广西南宁林荫校区咨询中心南B区",
          id: "site",
        },
      ],
      patient2: [
        {
          title: "缴费金额",
          main: "已预约",
        },
        {
          title: "缴费时间",
          main: "12",
        },
      ],
      //取消预约
      customStyle: {
        position: "fixed",
        bottom: "30rpx",
        width: "690rpx",
        height: "90rpx",
        // zIndex: 20000
      },
      isshow: false,
      content: "请先完成实名认证才可使用",
      // 确认样式
      confirmStyle: {
        width: "32%",
        height: "80rpx",
        color: "#fff",
        fontSize: "30rpx",
        fontWeight: "bold",
        lineHeight: "80rpx",
        backgroundColor: "#F4333C",
        borderRadius: "40rpx",
      },
      // 取消样式
      cancelStyle: {
        width: "32%",
        height: "80rpx",
        fontSize: "30rpx",
        fontWeight: "bold",
        lineHeight: "80rpx",
        backgroundColor: "#ECECEC",
        borderRadius: "40rpx",
      },
      // 内容样式
      contentStyle: {
        height: "80rpx",
        marginTop: "50rpx",
        marginBottom: "180rpx",
        color: "#666666",
        fontSize: "30rpx",
        fontWeight: "500",
        lineHeight: "80rpx",
        textAlign: "center",
      },
    };
  },
  methods: {
    //点击选择预约时间，显示
    selectHandle() {
      this.showPopup = true;
    },
    // 关闭弹出框
    closeHandle() {
      this.showPopup = false;
    },
    // 选中某个单选框时，由radio时触发
    radioChange(e) {
      // console.log(e);
    },
    addPerson() {
      // console.log("添加咨询人");
      uni.navigateTo({
        url: "/pages/addPatient/addPatient",
      });
    },
    // 点击取消显示模态框
    cancelOrder() {
      this.isshow = true;
    },
    //关闭模态框
    closeModal() {
      this.isshow = false;
    },
    // 确认取消
    toCertification() {
      this.isshow = false;
      this.$refs.uToast.show({
        title: "取消成功",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-content {
  padding: 0rpx 30rpx;
  overflow: hidden;

  .patient-msg-show {
    margin-top: 30rpx;

    .information-title {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      > img {
        width: 5rpx;
        height: 28rpx;
      }

      > text {
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
        margin-left: 10rpx;
      }
    }

    .patient-msg-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      border-radius: 12rpx;
      padding: 40rpx 24rpx 20rpx;

      > text:first-child {
        font-size: 30rpx;
        color: #999999;
      }

      > text:last-child {
        font-size: 30rpx;
        color: #333333;
      }

      .left-column {
        > view {
          margin-bottom: 16rpx;
        }
      }

      .img {
        width: 130rpx;
        height: 130rpx;
      }

      .money {
        font-weight: bold;
        color: #333333;

        .bigger {
          font-size: 44rpx;
        }
      }
    }

    .patient-msg-row:last-child {
      padding-bottom: 40rpx;
    }
  }
}
// 模态框
.slot-content {
  .modal-button {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
.toast {
  width: 80%;
  height: 200rpx;
  border-radius: 30rpx;
}
</style>
